<template>
  <div class="right hh-login">
    <div class="hh-xgzl select">
      <h3 class="hh-sy">账号信息</h3>
      <div class="ct" style="width: 952px">
        <div class="div1 div">
          <p class="p1 af"><span>基本信息</span></p>
        </div>
        <div class="div div2" id="tx">
          <p class="p1 af p2"><span>用户头像</span> <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar" width="60" height="60" class="tx">
            <!--<a href="javascript:;" class="bj">{{grzx.bj}}<i></i></a>-->
          </p>
          <div class="ycd af">
            <img :src="'https://exam.zhonghaiqihang.com/'+title.gr.avatar" width="180px" height="180px">
            <div class="rt">
              <input type="file" style="display:none;">
              <a href="javascript:;">修改头像</a>
              <p class="javascript:;">头像尺寸180*180</p>
            </div>
          </div>
        </div>
        <div class="div">
          <p class="p1 af"><span>用户名</span><strong>{{title.gr.username}}</strong></p>
        </div>
        <div class="div">
          <p class="p1 af"> <span>用户账号</span> <strong>{{title.gr.name}}</strong></p>
        </div>
        <div class="div">
          <p class="p1 af"><span>注册时间</span> <strong>{{title.gr.createtime}}</strong></p>
        </div>
        <div class="div" id="mm">
          <p class="p1 af"><span>密码</span><strong>******</strong> <a href="javascript:;" class="bj">{{grzx.bj}}<i></i></a></p>
          <div class="ycd ycd2 xx">
            <p class="m1"><span>设置密码 : </span><input type="password" id="mima1" ></p>
            <p class="m2"><span>确认密码 : </span><input type="password" id="mima2" ></p>
            <a href="javascript:;" class="bc" @click="xgmm">保存</a>
          </div>
        </div>
        <div class="div" id="sjhm">
          <p class="p1 af"><span>手机号码</span><strong>{{title.gr.mobile}}</strong> <strong style="margin-left: 30px">{{title.gr.mobileone}}</strong> <strong style="margin-left: 30px">{{title.gr.mobiletwo}}</strong><a href="javascript:;" class="bj">{{grzx.bj}}<i></i></a></p>
          <div class="ycd ycd3 xx">
            <p class="sj"><span>手机号 : </span><input type="text" id="sjh1" :value="title.gr.mobile?title.gr.mobile:''"><span >手机号 : </span><input type="text" id="sjh2" :value="title.gr.mobileone?title.gr.mobileone:''"><span >手机号 : </span><input type="text" id="sjh3" :value="title.gr.mobiletwo?title.gr.mobiletwo:''"></p>
            <a href="javascript:;" class="bc" @click="xgsj">保存</a>
          </div>
        </div>
        <div class="div" id="dzyx2">
          <p class="p1 af"><span>电子邮箱</span><strong>{{title.gr.email?title.gr.email:'未添加邮箱'}}</strong> <a href="javascript:;" class="bj">{{grzx.bj}}<i></i></a></p>
          <div class="ycd ycd4 xx">
            <p class="sj"><span>电子邮箱 : </span><input type="email" id="dzyx" :value="title.gr.email?title.gr.email:''"></p>
            <a href="javascript:;" class="bc" @click="xgyx">保存</a>
          </div>
        </div>
        <div class="div" id="sfzh2">
          <p class="p1 af"><span>身份证号</span><strong>{{title.gr.idcard?title.gr.idcard:'未添加身份证号'}}</strong><a href="javascript:;" class="bj">{{grzx.bj}}<i></i></a></p>
          <div class="ycd ycd5 xx">
            <p class="sj"><span>身份证号 : </span><input type="text" id="sfzh" :value="title.gr.idcard?title.gr.idcard:''"></p>
            <a href="javascript:;" class="bc" @click="xgsfz">保存</a>
          </div>
        </div>

      </div>
    </div>

    <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>

  </div>


</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        grzx:{
          bj:'编辑'
        },
        title:{
          gr:{
          }
        },
        dzyx:'',
        sfzh:'',
        mima:'',
        mima1:'',
        mima2:'',
        sj1:'',
        sj2:'',
        sj3:'',
        select:1,
        tcmsg:''

      }
    }
    ,
    async asyncData ({req,params}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie)
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/editUserInfoIndexData?userid=`+cookie);

    let data  = {nav:nh.data,id:cookie,gr:gr.data,xggr:nh2.data};
    return { title: data}
  },
    watch:{
      "$route": function(){
        //路由变化会触发
        if(this.$route.query.name == 'one'){
          $('.hh-grzx .left  li').removeClass('select');
          $('.hh-grzx .left .div2 .li1').addClass('select');
        }else if(this.$route.query.name == 'phone'){
          $('.ycd').removeClass('select');
          $('.hh-grzx .left  li').removeClass('select');
          $('.hh-grzx .left .div2 .li2').addClass('select');
          $('#sjhm .ycd').addClass('select');
          $('#sjhm .tx').toggleClass('select');
          $('.hh-xgzl strong').removeClass('select');
          $('#sjhm strong').addClass('select');
          $('.bj').removeClass('select');
          $('#sjhm .bj').addClass('select');
          $('.bj').html('编辑<i></i>');
          $('#sjhm .bj').html('展开<i></i>');

        } else if(this.$route.query.name == 'password'){
          $('.ycd').removeClass('select');
          $('.hh-grzx .left  li').removeClass('select');
          $('.hh-grzx .left .div2 .li3').addClass('select');
          $('#mm .ycd').addClass('select');
          $('#mm .tx').toggleClass('select');
          $('.hh-xgzl strong').removeClass('select');
          $('#mm strong').addClass('select');
          $('.bj').removeClass('select');
          $('#mm .bj').addClass('select');
          $('.bj').html('编辑<i></i>');
          $('#mm .bj').html('展开<i></i>');

        }else if(this.$route.query.name == 'email'){
          $('.ycd').removeClass('select');
          $('.hh-grzx .left  li').removeClass('select');
          $('.hh-grzx .left .div2 .li4').addClass('select');
          $('#dzyx2 .ycd').addClass('select');
          $('#dzyx2 .tx').toggleClass('select');
          $('.hh-xgzl strong').removeClass('select');
          $('.bj').removeClass('select');
          $('#dzyx2 strong').addClass('select');
          $('#dzyx2 .bj').addClass('select');
          $('.bj').html('编辑<i></i>');
          $('#dzyx2 .bj').html('展开<i></i>');
        }



      }
    }
    ,
    mounted:function(){
      if(this.title.gr == 'go_signin'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userid_error'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_is_null'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }else if(this.title.gr == 'userinfo_banuse'){
        this.$router.push('/Login');
        setCookie('userinfoRes','',-1);
      }
      else if(this.title.gr == 'serviceid_is_null'){
        window.open('/Modify',_self);
      } else if(this.title.gr == 'serviceid_error'){
        window.open('/Modify',_self);
      }else if(this.title.gr == 'serviceinfo_is_null'){
        window.open('/Modify',_self);
      }else if(this.title.gr == 'serviceinfo_banuse'){
        window.open('/Modify',_self);
      }

      if(this.$route.query.name == 'one'){
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div2 .li1').addClass('select');
      }else if(this.$route.query.name == 'phone'){
        $('.ycd').removeClass('select');
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div2 .li2').addClass('select');
        $('#sjhm .ycd').addClass('select');
        $('#sjhm .tx').toggleClass('select');
        $('#sjhm strong').toggleClass('select');
        $('#sjhm .bj').addClass('select');
        $('#sjhm .bj').html('展开<i></i>');

      }else if(this.$route.query.name == 'password'){
        $('.ycd').removeClass('select');
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div2 .li3').addClass('select');
        $('#mm .ycd').addClass('select');
        $('#mm .tx').toggleClass('select');
        $('#mm strong').toggleClass('select');
        $('#mm .bj').addClass('select');
        $('#mm .bj').html('展开<i></i>');
      }
      else if(this.$route.query.name == 'email'){
        $('.ycd').removeClass('select');
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div2 .li4').addClass('select');
        $('#dzyx2 .ycd').addClass('select');
        $('#dzyx2 .tx').toggleClass('select');
        $('#dzyx2 strong').toggleClass('select');
        $('#dzyx2 .bj').addClass('select');
        $('#dzyx2 .bj').html('展开<i></i>');
      }

    },
    methods:{
      xgyx:function(){
        var _this = this;
        var yx = $('#dzyx').val();
        let lj = 'userid='+this.title.id+'&email='+yx;
        _this.$axios.post('/api'+'PInterface/UserCenter/editEmailOperation',lj)
          .then(function(response){
            _this.tcmsg = response.data;
            $('.tc').addClass('select');

            window.open('/PersonalCenter/Modify','_self');

          });
      },
      xgsfz:function(){
        var _this = this;
        var sfz = $('#sfzh').val();
        let lj = 'userid='+this.title.id+'&idcard='+sfz;
        if(sfz.length == 18){
          _this.$axios.post('/api'+'PInterface/UserCenter/editIdcardOperation',lj)
            .then(function(response){
              _this.tcmsg = response.data;
              $('.tc').addClass('select');
              window.open('/PersonalCenter/Modify','_self')
            });
        }else{
          _this.tcmsg = '身份证格式不正确';
          $('.tc').addClass('select');
          $('.tc').fadeIn(0);
          $('.tc').fadeOut(2500);
        }

      },
      xgsj:function(){
        var _this = this;
        var sj1 = $('#sjh1').val();
        var sj2 = $('#sjh2').val();
        var sj3 = $('#sjh3').val();

        let lj = 'userid='+this.title.id+'&mobile='+sj1+'&mobileone='+sj2+'&mobiletwo='+sj3;
        _this.$axios.post('/api'+'PInterface/UserCenter/editMobileOperation',lj)
          .then(function(response){
            _this.tcmsg = response.data;
            $('.tc').addClass('select');

            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/editUserInfoIndexData?userid='+_this.title.id)
              .then(function(response){
              });
            window.open('/PersonalCenter/Modify','_self')

          });

      },
      xgmm:function(){
        var _this = this;
        var mima1 = $('#mima1').val();
        var mima2 = $('#mima2').val();
          let lj = 'userid='+this.title.id+'&onepassword='+mima1+'&twopassword='+mima2;
          _this.$axios.post('/api'+'PInterface/UserCenter/editPasswordOperation',lj)
            .then(function(response){
              _this.tcmsg = response.data;
              $('.tc').addClass('select');
              window.open('/PersonalCenter/Modify','_self')

            });
      }
    }
  }
</script>

<style>

</style>
